<script setup lang="ts">
const props = defineProps<{ user?: User | null }>();
const isEdit = computed(() => (props.user ? true : false));
const title = computed(() => (isEdit.value ? "修改" : "添加"));
const showPassword = ref(false);
const showRePassword = ref(false);

const emit = defineEmits(["cancel", "ok"]);

const frm = reactive(
  isEdit.value
    ? { ...props.user, password: "", re_password: "" }
    : { email: "", password: "", re_password: "", id: "" }
);
const { toast, msg } = useStatus();

const { $post, $put } = use$fetch();

const editedPassword = ref(false);

const passwordIsRequired = computed(() =>
  isEdit.value ? editedPassword.value : true
);

const resetFrm = () => {
  frm.email = "";
  frm.password = "";
  frm.re_password = "";
  frm.id = "";
};

const handleSubmit = async () => {
  if (passwordIsRequired.value) {
    if (frm.password.length < 6) {
      toast.value = "密码至少6字符";
      return;
    }
    if (frm.password !== frm.re_password) {
      toast.value = "两次输入的密码不一致";
      return;
    }
  }

  if (isEdit.value) {
    await $put<AffResp>(
      "/admin/user",
      { ...frm, skip: !passwordIsRequired.value },
      (v) => {
        msg.value = "修改成功";
        resetFrm();
        emit("ok");
        return v;
      }
    );
    return;
  }

  await $post<IdResp>("/admin/user", { ...frm }, (v) => {
    msg.value = "添加成功";
    resetFrm();
    emit("ok");
    return v;
  });
};

watch(
  () => frm.password,
  () => {
    editedPassword.value = true;
  }
);
</script>

<template>
  <Dialog>
    <form
      autocomplete="off"
      class="flex flex-col gap-y-4 required"
      @submit.prevent="handleSubmit"
    >
      <div class="text-lg">{{ title }}用户</div>

      <label class="flex justify-start items-center">
        <div class="shrink-0">邮箱：</div>
        <div class="border rounded px-3 py-1.5 grow">
          <input
            class="bg-transparent block w-full outline-none"
            type="email"
            v-model="frm.email"
            required
          />
        </div>
      </label>

      <label class="flex justify-start items-center">
        <div
          class="shrink-0"
          :class="{ 'ml-3': !passwordIsRequired, '-ml-1': passwordIsRequired }"
        >
          密码：
        </div>
        <div
          class="border rounded px-3 py-1.5 grow flex justify-between items-center"
        >
          <input
            class="bg-transparent block w-full outline-none grow"
            :type="showPassword ? 'text' : 'password'"
            v-model="frm.password"
            :required="passwordIsRequired"
            :placeholder="!passwordIsRequired ? '不修改密码请留空' : ''"
          />
          <button
            type="button"
            class="shrink-0"
            @click="showPassword = !showPassword"
          >
            <Icon name="uil:eye" v-if="!showPassword" />
            <Icon name="uil:eye-slash" v-else />
          </button>
        </div>
      </label>

      <label class="flex justify-start items-center">
        <div
          class="shrink-0"
          :class="{ 'ml-3': !passwordIsRequired, '-ml-1': passwordIsRequired }"
        >
          重复：
        </div>
        <div
          class="border rounded px-3 py-1.5 grow flex justify-between items-center"
        >
          <input
            class="bg-transparent block w-full outline-none grow"
            :type="showRePassword ? 'text' : 'password'"
            v-model="frm.re_password"
            :required="passwordIsRequired"
            :placeholder="!passwordIsRequired ? '不修改密码请留空' : ''"
          />
          <button
            type="button"
            class="shrink-0"
            @click="showRePassword = !showRePassword"
          >
            <Icon name="uil:eye" v-if="!showRePassword" />
            <Icon name="uil:eye-slash" v-else />
          </button>
        </div>
      </label>

      <div class="flex justify-end items-center gap-x-2">
        <button
          class="bg-cyan-700 text-white rounded border px-3 py-1.5"
          type="submit"
        >
          提交
        </button>
        <button
          class="bg-gray-300 rounded border px-3 py-1.5"
          type="button"
          @click="emit('cancel')"
        >
          取消
        </button>
      </div>
    </form>
  </Dialog>
</template>
